<template>
    <div class="danperten">
        <header class="header-con">
            <aside>
                <strong>{{LeagueName}}</strong>
                <p>
                    <span>{{HTeam}}</span><b>VS</b><span>{{VTeam}}</span>
                </p>
            </aside>
            <img src="http://common-1253410441.file.myqcloud.com/activityimg/20171208102034.png" alt="">
        </header>
        <div class="container">
            <section class="match">
                <span class="match-info">
                    <b>{{WkName}}{{MNo}}</b>
                    <b>{{EndTime}}</b>
                </span>
                <dl class="match-list">
                    <dd v-for="(item,index) in macthobj" :class="[index===1?'middle':'',item.selected?'selected':'']"
                        @click="countfn(index)">
                        <span>
                            {{item.name}}
                        </span>
                        <strong>
                            {{item.spvalue}}
                        </strong>
                    </dd>
                </dl>
                <p class="touinfo"><span>投<input maxlength="5" v-model="bei" type="tel">倍</span> <strong>投注金额: <i>{{bei*2*selectedlength}}元</i></strong>
                </p>
                <strong class="jiangjin">预计奖金：<b>{{predict}}元</b></strong>
                <a class="a-submit" href="javascript:;" @click="btnsubmit">立即预约</a>
            </section>
            <section class="pnel">
                <img src="//common-1253410441.file.myqcloud.com/activityimg/20171208114758.png" alt="">
                <table>
                    <thead>
                    <tr>
                        <td>中奖奖金</td>
                        <td>加奖金额</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>100-499元</td>
                        <td>6元</td>
                    </tr>
                    <tr>
                        <td>500-1999元</td>
                        <td>35元</td>
                    </tr>
                    <tr>
                        <td>2000-4999元</td>
                        <td>160元</td>
                    </tr>
                    <tr>
                        <td>5000-10000元</td>
                        <td>450元</td>
                    </tr>
                    <tr>
                        <td>10000+元</td>
                        <td>1000元</td>
                    </tr>
                    </tbody>
                </table>
            </section>
            <section class="pnel">
                <img src="//common-1253410441.file.myqcloud.com/activityimg/20171208114759.png" alt="">
                <p class="intro">
                    <span>1、玩法加奖：仅限在本页面投注的订单。</span>
                    <span> 2、加奖红包一天最多2888元。</span>
                    <span>3、奖励红包将于比赛开奖后24小时内派发，竞彩专用红包，可在〖我的-我的红包〗查看。</span>
                    <span>4、此活动不与其他相关加奖活动同时享受。</span>
                    <span>5、如购买比赛由于官方原因终止，此活动自动取消。</span>
                    <span>6、此活动最终解释权归本应用所有，本活动与苹果公司无关.</span>
                </p>
            </section>
            <x-switch :title="1" v-model="show5"></x-switch>
            <div v-transfer-dom>
                <confirm v-model="show5"
                         ref="confirm5"
                         title="提示"
                         content="您暂无加奖资格,是否继续购买"
                         @on-cancel="onCancel"
                         @on-confirm="onConfirm">
                </confirm>
            </div>
        </div>
    </div>

</template>

<script>
    import {Toast, Confirm} from 'vux';
    import {getMytoken, getLogintoken} from '../../services/common';
    import {nativetonative, h5tonative} from '../../utils/otherfn';
    import {namesource, jumptype} from '../../utils/config/common';
    const R = require('ramda');
    import store from 'store2';
    import axios from 'axios';
    export default {
        components: {
            Confirm,
            Toast,
        },
        data() {
            return {
                show5: false,
                "LotteryID": 1,
                "LotteryName": "竞彩足球",
                "IssueID": '-------',
                "IssueNo": "------",
                "MNo": "---",
                "WkName": "--",
                "EndTime": "----",
                "LeagueName": "-----",
                "HTeam": "----",
                "VTeam": "----",
                "SP": "--,--,--",
                "RQ": 0,
                bei: 10,
                haszige: false,
                macthobj: [
                    {
                        name: `------`,
                        spvalue: '主胜(----)',
                        sp: 0,
                        tnum: 3,
                    },
                    {
                        name: `------`,
                        spvalue: '平(----)',
                        sp: 0,
                        tnum: 3,
                    }, {
                        name: `------`,
                        spvalue: '客胜----',
                        sp: 0,
                        tnum: 3,
                    },
                ]
            };
        },
        created() {
            this.itemid = this.$route.params.itemid;
            this.getinfo(this.itemid);
        },
        computed: {
            spArr: function () {
                return this.SP.split(',')
            },
            selectedlength: function () {
                return this.macthobj.filter((e)=>e.selected).length;
            },
            predict: function () {
                let predictmoney = 1, numarr = [];
                this.macthobj.map((e, i)=> {
                    const {sp, selected}=e;
                    if(selected) {
                        numarr.push(sp);
                    }
                });
                if(numarr.length > 0) {
                    let result = numarr.sort();
                    predictmoney = `${(R.head(result) * this.bei * 2).toFixed(2)}~${(R.last(result) * this.bei * 2).toFixed(2)}`
                }
                else {
                    predictmoney = 0;
                }
                return predictmoney === 1 ? 0 : predictmoney;
            }
        },
        mounted() {

        },
        methods: {
            /**
             * 获取一些初始化信息
             */
            jumpfn(){
                //jumptype[1]
                nativetonative(jumptype[1]);
            },
            async getinfo(itemid){
                const {data}=await axios.get(`/data/Handler.ashx?action=421&params={"IssueNo":"${itemid}"}`);
                if(data && data.code === 0) {
                    const {
                            LotteryID
                            , LotteryName
                            , IssueID
                            , IssueNo
                            , MNo
                            , WkName
                            , EndTime
                            , LeagueName
                            , HTeam
                            , VTeam
                            , SP
                            , RQ
                    }=data.data;
                    this.LotteryID = LotteryID;
                    this.LotteryName = LotteryName;
                    this.IssueID = IssueID;
                    this.IssueNo = IssueNo;
                    this.MNo = MNo;
                    this.WkName = WkName;
                    this.EndTime = EndTime;
                    this.LeagueName = LeagueName;
                    this.HTeam = HTeam;
                    this.VTeam = VTeam;
                    this.SP = SP;
                    this.RQ = RQ;
                    const spArr = SP.split(',');
                    this.macthobj = [
                        {
                            name: HTeam,
                            spvalue: `主胜(${spArr[0]})`,
                            sp: spArr[0],
                            tnum: 3,
                            selected: false
                        },
                        {
                            name: RQ === 0 ? 'VS' : RQ,
                            spvalue: `平(${spArr[1]})`,
                            sp: spArr[1],
                            tnum: 1,
                            selected: false
                        }, {
                            name: VTeam,
                            spvalue: `客胜${spArr[2]}`,
                            sp: spArr[2],
                            tnum: 0,
                            selected: false
                        },
                    ];
                    this.getzige();
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            async getzige(){
                const {token}=await getMytoken(true);
                const {data}=await axios.get(`/hd/Handler.ashx?action=1150&params={"UserCode":"${token}","IssueNo":"${this.IssueNo}"}`);
                this.haszige = !!(data && data.code === 0);
            },
            countfn(index){
                this.macthobj[index].selected = !this.macthobj[index].selected;
            },
            async onConfirm(){
                const {token}=await getMytoken(true);
                const selectlist = this.macthobj.filter((e)=>e.selected).map(e=>e.tnum).join('/');
                let payResult = {
                    Number: [
                        {
                            Money: `${ 2 * this.selectedlength}`,
                            Number: `${this.IssueNo}=${this.RQ === 0 ? 1 : 2}_${selectlist}|1*1`,
                            PlayTypeID: "109"
                        }
                    ],
                    LotteryID: 1,
                    LotteryName: "竞彩足球",
                    IssueName: "",
                    Multi: this.bei,
                    TotalMoney: this.bei * 2 * this.selectedlength,
                    Recommend: "0",
                    RecommendMsg: "",
                    ExpectWinMoney: "",
                    UserCode: token,
                    IssueID: this.IssueID,
                    HBCode: 1
                };
                store('payResult', {payResult: payResult});
                setTimeout(function () {
                    h5tonative('订单支付', `${location.origin}/#/security/pay`)
                }, 500)
            },
            async btnsubmit(){
                const {token}=await getMytoken(true);
                if(!token) {
                    getLogintoken(function (value) {
                        console.log('vvv', value);
                        if(value) {
                            location.reload();
                        }
                    }).then(({token})=> {
                    });
                    return;
                }
                const resultlast = this.macthobj.filter((e)=>e.selected);
                if(resultlast.length < 1) {
                    this.$vux.toast.text('请选择');
                    return;
                }

                if(this.haszige) {
                    this.$vux.toast.text('跳转中。。。');
                    this.onConfirm();
                }
                else {
                    this.show5 = true;
                }

            }

        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    .danperten {
        img {
            width: 100%;
            display: block
        }
    }

    .header-con {
        position: relative;
        aside {
            position: absolute;
            width: 100%;
            left: 0;
            top: 180px;
            text-align: center;
            strong {
                height: 45px;
                background: #000;
                padding: 10px;
                color: #e5e9ab;
                font-size: 30px;
            }
            p {
                margin-top: 43px;
                font-size: 40px;
                span {
                    background: #fff;
                    border-radius: 30px;
                    padding: 0 20px;
                    height: 70px;
                    display: inline-block;
                    line-height: 70px;
                    font-weight: bold;
                }
                b {
                    width: 64px;
                    height: 64px;
                    display: inline-block;
                    background: #000;
                    border-radius: 50%;
                    font-weight: 900;
                    line-height: 64px;
                    color: #fff;
                    margin: 0 20px;
                }
            }
        }
    }

    .container {
        background: linear-gradient(to bottom, #0d201f, #376e25);
        .match {
            width: 650px;
            height: 410px;
            background: #fff;
            border-radius: 20px;
            margin: 0 auto;
            box-sizing: border-box;
            padding: 0 23px;
            position: relative;
            .match-info {
                color: #7c7a7a;
                font-size: 32px;
                margin-top: 10px;
                margin-bottom: 24px;
                display: inline-block;
                b {
                    display: inline-block;
                    margin-right: 20px;
                }
            }
            .match-list {
                display: flex;
                justify-content: space-between;
                dd {
                    width: 203px;
                    height: 110px;
                    box-sizing: border-box;
                    border: 1px solid #6a6a6a;
                    border-radius: 10px;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    span {
                        font-size: 32px;
                        font-weight: bold;
                    }
                    strong {
                        font-size: 26px;
                        color: #7c7a7a;
                    }
                    &.selected {
                        background: #ef3a50;
                        color: #fff;
                        border: 1px solid #ef3a50;
                        strong {
                            color: #fff;
                        }
                    }
                    &.middle {
                        width: 152px;
                    }
                }
            }
            .touinfo {
                font-size: 32px;
                color: #000;
                display: flex;
                margin-top: 28px;
                font-weight: bold;
                span {
                    flex: 1;
                    input {
                        font-size: 32px;
                        text-align: center;
                        width: 104px;
                        height: 65px;
                        display: inline-block;
                        border-radius: 10px;
                        border: 1px solid #6a6a6a;
                        margin: 0 12px;
                    }
                }
                strong {
                    font-weight: bold;
                    display: flex;
                    align-items: center;
                    margin-right: 90px;
                    i {
                        margin-left: 10px;
                        font-size: 48px;
                        color: #f84b5f;
                        font-weight: bold;
                    }
                }
            }
            .jiangjin {
                text-align: center;
                font-size: 28px;
                display: block;
                margin-top: 14px;
                font-weight: bold;
                color: #000;
                b {
                    font-weight: bold;
                    color: #f34358;
                }
            }
            .a-submit {
                width: 470px;
                height: 110px;
                position: absolute;
                left: 50%;
                background: linear-gradient(to bottom, #ff576b, #e62b42);
                border-radius: 30px;
                color: #fff;
                font-size: 60px;
                line-height: 110px;
                text-align: center;
                transform: translate(-50%);
                bottom: -74px;
                font-weight: 900;
            }
        }
        .pnel {

            width: 640px;
            margin: 0 auto;
            margin-top: 100px;
            table {
                table-layout: fixed;
                color: #fff;
                width: 100%;
                margin: 0 auto;
                margin-top: 40px;
                text-align: center;
                td {
                    border: 1px solid #fff;
                    height: 74px;
                }
                thead {
                    td {
                        background: #40863b;
                    }
                }
            }
            .intro {
                color: #fff;
                padding-bottom: 40px;
                margin-top: 30px;
                span {
                    line-height: 40px;
                    display: block;
                }
            }
        }
    }
</style>